<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>设置播出时间段位</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="${ctx}/rs/js/jquery.validate.min.js"></script>
<script src="${ctx}/rs/js/jquery.form.js" type="text/javascript"></script>
<style type="text/css">
	.timeRangeSelect{clear: both;}
	.timeRangeSelect li{list-style: none;padding: 5px 10px;border: 1px #E3E3E3 solid;float: left;}
	.timeRangeSelect li:hover{background: whitesmoke;}
	.timeRangeSelect li.active{background: lightgrey;}
	
	.Wdate{width: 120px; height: 26px;}
	tr.error{border: 1px whitesmoke solid !important;}
	tr.error td{background: rgba(224,74,74,0.25) !important;}
</style>
</head>
<body>
<form id="timeRangeForm" class="form-horizontal">
	<input type="hidden" name="broadcastId" value="${broadcastId}"/>
	<div class="form-group">
		<div class="timeRangeSelect">
			<c:forEach items="${timeLevelList}" var="item" varStatus="status">
				<li timeLevelId="${item.id}"  ${status.index eq 0?'class="active"':'' }>
					${item.value}
				</li>
			</c:forEach>
		</div>
	</div>
	<h5 class="unableTxt">已设置时段</h5>
	<hr style="margin-top: 0px;"/>
	<div style="height: 200px;overflow-y: scroll;overflow-x: hidden;">
		<table id="timeTable" class="table table-border">
			<c:if test="${fn:length(pInfoList) eq 0}">
				<tr><td colspan="4">暂无数据</td></tr>
			</c:if>
			<c:forEach items="${pInfoList}" var="item">
				<tr>
					<td>${item.timeLevelName}</td>
					<td id="sTime">${item.startTime}</td>
					<td id="eTime">${item.endTime }</td>
					<td><a onclick="removeTime(${item.id})" style="color: red;font-size: 18px;"><i class="glyphicon glyphicon glyphicon-minus rowRemove"></i></a></td>
				</tr>
			</c:forEach>
		</table>
	</div>
	
	<hr/>
	<div class="form-group">
		<div class="col-sm-2 text-right">
			<label class="p5">新增：</label>
		</div>
		<div class="col-sm-3">
			<input type="text" id="t_startTime" name="startTime" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate form-control"/>
		</div>
		<div class="col-sm-3">
			<input type="text" id="t_endTime" name="endTime" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate form-control"/>
		</div>
		<div class="col-sm-1">
			<a onclick="addTime();" style="color: green;font-size: 18px;"><i class="glyphicon glyphicon-plus rowAdd"></i></a>
		</div>
	</div>
	<hr/>
	
	<div class="row text-right">
		<a class="btn btn-primary mr15" onclick="valiSubmit2();">关闭</a>
	</div>
</form>


<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
<script src="${ctx}/rs/js/messages_zh.min.js"></script>
<script type="text/javascript">
	$(".timeRangeSelect").on("click","li",function(e){
		$(this).addClass("active").siblings().removeClass("active");
	});
	
	function refreshTable(){
		$.ajax({
			url: '${ctx}/bsqxTimePoint/getTimePointList.htm',
			type: 'post',
			dataType: 'json',
			data: {
				broadcastId: ${broadcastId}
			},
			success: function(data){
				$("#timeTable").children().remove();
				if(data.length>0){
					var html = "";
					$.each(data,function(i,item){
						html += '<tr>' 
							+ '<td>'+item.timeLevelName+'</td>'
							+ '<td id="sTime">'+(item.startTime?item.startTime:'')+'</td>'
							+ '<td id="eTime">'+(item.endTime?item.endTime:'')+'</td>'
							+ '<td><a style="color: red;font-size: 18px;" onclick="removeTime('+item.id+')"><i class="glyphicon glyphicon glyphicon-minus rowRemove"></i></a></td>'
							+ '</tr>';
					});
					$("#timeTable").append(html);
				}else{
					var html = '<tr><td colspan="4">暂无数据</td></tr>';
					$("#timeTable").append(html);
				}
			},
			error: function(res){
				bootstrapQ.msg({
					msg: '请求时段设置数据失败。',
					type: 'danger',
					time: 2000
				})
			}
		})
	};
	
	function addTime(){
		var broadcastId = ${broadcastId};
		var timeLevelId = $(".timeRangeSelect li.active").attr("timeLevelId");
		var startTime = $("#t_startTime").val();
		var endTime = $("#t_endTime").val();
		
		var flag = true;
		if(!startTime || !endTime ){
			flag = false;
		}
		//校验
		/* $("#timeTable tr").each(function(i,item){
			debugger
			var sTime = $(item).find("#sTime").text();
			var eTime = $(item).find("#eTime").text();
			if(eTime&&endTime){
				if(endTime<=sTime||startTime>=eTime){
					$(item).removeClass("error");
				}else{
					$(item).addClass("error");
					flag = false;
				}
			}else if((!eTime&&endTime)||(eTime&&!endTime)){
				$(item).removeClass("error");
			}else{
				if(startTime!=sTime){
					$(item).removeClass("error");
				}else{
					$(item).addClass("error");
					flag = false;
				}
				
			}
		});*/
		if(!flag){
			bootstrapQ.msg({
				msg: '请设置时间！',
				type: 'danger',
				time: 2000
			});
			return;
		} 
		
		var data=[],tmp = {};
		tmp.timeLevelId = timeLevelId;
		if(startTime&&endTime){
			tmp.startTime = startTime;
			tmp.endTime = endTime;
			showType = 2;
			tmp.showType = showType;
		}else if(startTime){
			tmp.startTime = startTime;
			showType = 1;
			tmp.showType = showType;
		}else{
			bootstrapQ.msg({
				msg: '请填写时间！',
				type: 'danger',
				time: 2000
			});
			return true;
		}
		tmp.broadcastId = broadcastId;
		data.push(tmp);
		//触发隐藏确认的按钮，引用回调方法关闭窗口并刷新列表
		$.ajax({
			url: '${ctx}/bsqxTimePoint/save.htm',
			dataType: 'json',
			data: {
				broadcastId: broadcastId,
				timeInfo: JSON.stringify(data)
			},
			success: function(data){
				if(data.res){
					bootstrapQ.msg({
						msg: '保存成功！',
						type: 'success',
						time: 2000
					});
					refreshTable();
					//触发隐藏确认的按钮，引用回调方法关闭窗口并刷新列表
					//$("button.bsok").click();
				}else{
					bootstrapQ.msg({
						msg: '保存失败！',
						type: 'danger',
						time: 2000
					});
				}
			},
			error: function(res){
				bootstrapQ.msg({
					msg: '保存失败！',
					type: 'danger',
					time: 2000
				});
			}
		})
		
	}
	
	function removeTime(id){
		$.ajax({
			url: '${ctx}/bsqxTimePoint/deleteById.htm',
			type: 'post',
			data: {
				id: id
			},
			success: function(data){
				if(data){
					bootstrapQ.msg({
						msg: '删除成功！',
						time: 'success',
						time: 2000
					});
					refreshTable();
				}else{
					bootstrapQ.msg({
						msg: '删除失败！',
						time: 'success',
						time: 2000
					});
				}
			},
			error: function(data){
				bootstrapQ.msg({
					msg: '删除失败！',
					time: 'success',
					time: 2000
				});
			}
			
		})
	}
	

    //初始化验证 start
    var timeRangeForm = $('#timeRangeForm');
    var validator2 = timeRangeForm.validate({
		rules: {
			
		  },
		  highlight: function(element) {
			  $(element).closest('.form-group').removeClass('success').addClass('error');
		  },
		  success: function(element) {
			  element.text('OK!').addClass('valid')
		      .closest('.form-group').removeClass('error').addClass('success');
		  }
    });
    /** end */

	function valiSubmit2() {
		$("button.bsok").click();
		return;
		if (timeRangeForm.valid()) {
			var broadcastId = "${broadcastId}";
			var data = [] //获取表单多个控件的数据
			$(".timeRangeSelect li").each(function(i,item){
				var tmp = {};
				var timeLevelId = $(item).attr("timeLevelId");
				var startTime = $(item).attr("startTime");
				var endTime = $(item).attr("endTime");
				var showType = $(item).attr("showType");
				
				tmp.timeLevelId = timeLevelId;
				if(startTime&&endTime){
					tmp.startTime = startTime;
					tmp.endTime = endTime;
					showType = 2;
					tmp.showType = showType;
				}else if(startTime){
					tmp.startTime = startTime;
					showType = 1;
					tmp.showType = showType;
				}else{
					return true;
				}
				tmp.broadcastId = broadcastId;
				data.push(tmp);
			});
			JSON.stringify(data);
			console.log(JSON.stringify(data));
			//触发隐藏确认的按钮，引用回调方法关闭窗口并刷新列表
			$.ajax({
				url: '${ctx}/bsqxTimePoint/save.htm',
				dataType: 'json',
				data: {
					broadcastId: broadcastId,
					timeInfo: JSON.stringify(data)
				},
				success: function(data){
					if(data.res){
						bootstrapQ.msg({
							msg: '保存成功！',
							type: 'success',
							time: 2000
						});
						//触发隐藏确认的按钮，引用回调方法关闭窗口并刷新列表
						$("button.bsok").click();
					}else{
						bootstrapQ.msg({
							msg: '保存失败！',
							type: 'danger',
							time: 2000
						});
					}
				},
				error: function(res){
					bootstrapQ.msg({
						msg: '保存失败！',
						type: 'danger',
						time: 2000
					});
				}
			})
		}
	}
    
    function reset2(){
    	validator2.resetForm();
    	timeRangeForm.find(".form-group.success").removeClass("success");
    	timeRangeForm.find(".form-group.error").removeClass("error");
    	timeRangeForm.find(":input.valid").removeClass("valid");
    }
    
    
</script>	
</body>
</html>